<template>
	<view>
		<view class="header-section">
			<view class="header-content">
				<text>电梯维修</text>
			</view>
			<view class="header_right" @click="handleNotice">
				<view class="menu-list iconfont icon-notice menu-icon" />
			</view>
		</view>
		<view class="content-section">
			<view class="content-query">
				<uni-search-bar placeholder="搜索订单号/地址" bgColor="#FFFFFF" confirm="search" v-model="searchValue"
					@input="inputSearch" />
			</view>
			<view class="content-tag">
				<uni-data-checkbox mode="tag" v-model="status" :localdata="statusList" @change="checkboxChange" />
			</view>

			<view class="content-list">
				<view class="content-card" v-for="item in indentList" :key="item.order">
					<uni-card @click="handleIndent(item)">
						<template v-slot:title style="margin-top: 1%; margin-top:1%;">
							<view class="card-top-title">
								<view class="card-top-left">
									<text>订单信息：{{item.orderNo}}</text>
								</view>
								<view class="card-top-right">
									<uni-indent-tag :status="item.orderStatus" :inverted="true"
										dict_key="repair_order_status" />
									<uni-indent-tag v-if="item.orderStatus == '1'" :inverted="true"
										:status="item.assignedStatus" dict_key="order_assigned_status" />
								</view>
							</view>
						</template>
						<view class="card-content">
							<view class="iconfont icon-locationfill content-top">
								<text>{{item.faultLocation}}</text>
							</view>
						</view>
						<view class="card-content">
							<view class="iconfont icon-infofill content-top">
								<text>{{item.faultDescription}}</text>
							</view>
						</view>
						<view class="card-content">
							<view class="iconfont icon-countdownfill content-top">
								<text>{{item.createTime}}</text>
							</view>
						</view>
						<view class="card-bottom">
							<view class="card-bottom-left">
								<view class="card-bottom-left-tag" v-if="item.orderType != ''">
									<uni-indent-tag :status="item.orderType" :inverted="true" :circle="true"
										dict_key="repair_order_type" />
								</view>

							</view>
							<view class="card-bottom-right">
								<button v-if="item.orderStatus == '0'" size="mini" :inverted="true" type="primary"
									@click="handleOrder(item)">接单</button>
							</view>
						</view>
					</uni-card>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		allOrder,
		taskOrder,
		updateOrder
	} from "@/api/repairManage/order.js"
	export default {
		data() {
			return {
				userId: this.$store.state.user.id,
				// 查询条件
				searchValue: "",
				// 订单状态
				status: "",
				statusList: [{
					text: '全部订单',
					value: ''
				}, {
					text: '待接单',
					value: '0',
				}, {
					text: '已指派',
					value: '1'
				}, {
					text: '进行中',
					value: '2'
				}],
				// 订单列表
				indentList: []
			}
		},
		created() {
			this.getIndentList();
		},
		onLoad(options) {
			console.log("=========电梯维修=========");
			console.log(options);
			console.log(options.status);
			if (options.status != undefined) {
				this.status = options.status
			} else {
				this.status = ''
			}

		},
		onHide(option) {
			console.log("页面隐藏");
			this.status = ""
		},
		onPullDownRefresh() {
			console.log("============== 下拉 ==============");
			this.getIndentList();
			uni.stopPullDownRefresh();
		},
		methods: {
			getIndentList() {
				console.log("============== 更新订单信息 ==============");
				allOrder({
					"orderStatus": this.status
				}).then(res => {
					this.indentList = res.rows;
				})
			},
			// 消息提醒
			handleNotice() {
				console.log("消息提示");
				this.$tab.reLaunch("/pages/message/index")
			},
			// 查询参数
			inputSearch() {
				console.log(this.searchValue);
				if (this.searchValue != "") {
					const intIndentList = []
					allOrder({
						"orderStatus": this.status
					}).then(res => {
						this.intIndentList = res.rows
					}).then(() => {
						this.indentList = this.intIndentList.filter(item => {
							return (
								item.orderNo.includes(this.searchValue) ||
								item.faultLocation.includes(this.searchValue))
						});;
					})
				} else {
					this.getIndentList();
				}
			},
			// 状态框操作
			async checkboxChange() {
				this.inputSearch();
			},

			// 点击订单跳转
			handleIndent(order) {
				const orderId = order.orderId
				const orderNo = order.orderNo
				const orderStatus = order.orderStatus
				const assignedStatus = order.assignedStatus
				const assignedRepairer = order.assignedRepairer
				console.log(orderStatus);
				console.log(assignedStatus);
				console.log(assignedRepairer);
				console.log(this.userId);
				if ((orderStatus == "1" || orderStatus == "2" )&& assignedStatus == "2" && assignedRepairer == this.userId ) {
					console.log("进入这个");
					this.$tab.navigateTo("/pages/indent/visit?order=" + orderNo)
				} else if (orderStatus == "1" && assignedRepairer == this.userId && assignedStatus != "2") {
					uni.showModal({
						title: '确定签收',
						content: `确定收到订单 ${orderNo}`,
						success: (res) => {
							if (res.confirm) {
								updateOrder({
									"orderId": orderId,
									"assignedStatus": "2"
								}).then(res => {
									this.getIndentList()
								})
							}
						},
					})
				} else if (orderStatus != "2") {
					console.log("订单号:" + orderNo + "订单状态不是进行中");
				} else if (assignedRepairer != this.userId) {
					this.$modal.msg(`订单号${orderNo}非当前登录用户维修，请检查登录错误`)
				}
			},
			// 接单按钮操作
			handleOrder(order) {
				const orderNo = order.orderNo
				const orderId = order.orderId
				uni.showModal({
					title: '确认接单',
					content: `订单 ${orderNo} 即将分配给您`,
					success: (res) => {
						if (res.confirm) {
							this.isProcessing = true
							taskOrder(orderId).then(res => {
								if (res.code == "200") {
									this.inputSearch();
								}
							})
							// 显示操作反馈
							uni.showToast({
								title: '接单成功'
							})

						}
					},

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #E5E7EB;
		// background-size: cover;
		// box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.header-section {
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 5%;
		background-color: #FFFFFF;
		padding-top: 2%;
		padding-bottom: 2%;
		display: inline-block;
		overflow-y: hidden;
		border-bottom: 1px solid #dedede;


		.header-content {
			margin: 0 auto;
			text-align: center;


			text {
				font-family: Roboto;
				font-size: 18px;
				font-feature-settings: "kern" on;
				color: #000000;
			}
		}

		.header_right {
			position: absolute;
			top: 1%;
			right: 2%;
			// color: #007AFF;
			// font-size: 16px;
			// display: flex;
			// right: 10%;
			// width: 20px;
			// height: 20px;
			// opacity: 1;
		}

	}

	.content-section {
		padding-top: 10%;
		padding-bottom: 10%;
		position: relative;
		width: 100%;
		overflow-y: scroll;


		.content-tag {
			margin-left: 3%;
		}

		.content-list {
			overflow: auto;

			.content-card {
				position: relative;
				width: 100%;
				// background-color: #FFFFFF;
				margin-top: 0.5%;
				border-radius: 5px;
				display: inline-flex;

				.card-top-title {
					position: relative;
					width: 100%;
					display: inline-flex;


					.card-top-left {
						position: absolute;
						left: 3%;

						text {
							font-family: system-ui;
							font-size: 15px;
							line-height: 21px;
							letter-spacing: 0px;

							font-feature-settings: "kern" on;
							color: #111827;
						}
					}

					.card-top-right {
						position: absolute;
						display: flex;
						right: 5%;
					}
				}

				.card-content {
					width: 100%;
					margin-top: 2%;
					word-wrap: break-word;

					.content-top {
						width: 100%;

						text {
							padding-left: 1%;
							font-family: Roboto;
							font-size: 14px;
							font-weight: normal;
							line-height: 17.5px;
							letter-spacing: 0px;
							font-feature-settings: "kern" on;
							color: #4B5563;
						}
					}
				}

				.card-bottom {
					position: relative;
					width: 100%;
					display: inline-flex;
					margin-top: 2%;
					margin-bottom: 8%;

					.card-bottom-left {
						position: absolute;
						left: 3%;

						.card-bottom-left-tag {
							display: inline-flex;
							padding: 2px;
						}
					}

					.card-bottom-right {
						position: absolute;
						top: -1%;
						right: 5%;
					}
				}
			}
		}
	}
</style>